/**
 * 厦门大学计算机专业 | 前华为工程师
 * 专注《零基础学编程系列》  http://lblbc.cn/blog
 * 包含：Java | 安卓 | 前端 | Flutter | iOS | 小程序 | 鸿蒙
 * 公众号：蓝不蓝编程
 */
<template>
  <div class="page-wrapper">
    <div class="search-row">
      <header class="search-header wrap">
        <img class="back-img" src="../images/back.png" @click="goBack"/>
        <div class="search-block">
          <img class="search-img" src="../images/search.png"/>
          <input type="text" class="search-input" v-model="keyword" />
        </div>
        <span class="search-text" @click="searchGoods">搜索</span>
      </header>
    </div>
    <div class="search-result">
      <van-list v-model:loading="loading" :finished="finished" @load="doSearch">
        <template v-if="list.length">
          <div class="goods-row" v-for="(goods, index) in list" :key="index" @click="goodsDetail(goods.id)">
            <van-card :key="goods.id" :price="goods.price" :title="goods.name" :thumb="goods.squarePic"/>
          </div>
        </template>
      </van-list>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { search } from '@/service/axios-services'
export default {
  setup() {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      keyword: route.query.keyword || '',
      searchBtn: false,
      seclectActive: false,
      list: [],
      loading: false,
      finished: false
    })

    const goBack = () => {
      router.go(-1)
    }

    const goodsDetail = (id) => {
      router.push({ path: `/goods/${id}` })
    }

    const searchGoods = () => {
      doSearch()
    }

    const doSearch = async () => {
       if (state.keyword) {
        const { data } = await search(state.keyword)
        state.list = data
      }
      state.loading = false
      state.finished = true
    }

    return {
      ...toRefs(state),
      goBack,
      goodsDetail,
      searchGoods,
      doSearch
    }
  }
}
</script>

<style>
.search-row {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999;
  background: #fff;
}
.search-header {
  display: flex;
  width: 100%;
  height: 46px;
  line-height: 46px;
  padding: 0 15px;
  font-size: 15px;
  z-index: 9999;
}
.search-block {
  display: flex;
  width: 80%;
  margin: 10px 10px;
  padding: 5px 0;
  color: #232326;
  background: #f4f4f4;
  border-radius: 20px;
}
.search-input {
  width:100%;
  background: #f4f4f4;
  margin-right: 20px;
  border: none;
}
.search-text {
  height: 28px;
  margin: 8px 0;
  line-height: 28px;
  padding: 0 5px;
  color: #EF3965;
  margin-top: 10px;
}
.back-img {
  height: 15px;
  width: 15px;
  padding: 15px 0;
}
.search-img {
  margin-left: 10px;
  margin-right: 5px;
  height: 20px;
  width: 20px;
}
.search-result {
  margin-top: 60px;
}
.van-card {
  background-color: white;
}
</style>
